<template>
  <div>
    <div class="search-block">
      <el-date-picker
        v-model="value"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions">
      </el-date-picker>
      <el-switch
        style="margin-left: 50px;"
        v-model="switchValue"
        active-color="#409eff"
        inactive-color="#13ce66"
        active-text="新增记录"
        inactive-text="修改记录">
      </el-switch>
      <el-button style="margin-left: 50px;">
        搜索
      </el-button>
    </div>
  
<!--   #409eff  active-color="#13ce66"
    inactive-color="#ff4949"-->
    
    <div class="timeline-block">
      <el-timeline>
        <!--时间线条-->
        <el-timeline-item
          :reverse="false"
          :timestamp="timeLine.releaseTime.split(' ')[0]"
          placement="top"
          v-for="timeLine in timelineList"
          :key="timeLine.blogId"
          icon="el-icon-more">
          <el-card>
            <h5>新增 <h5 @click="goto(timeLine.blogId)" class="timeline-title">《{{timeLine.title}}》</h5> 博客</h5>
            <p>{{username }} 提交于 {{timeLine.releaseTime}}</p>
          </el-card>
        </el-timeline-item>
        
      </el-timeline>
    </div>
  </div>
</template>

<script>
import {getBlogListByUid} from "@/api/blog/blogApi";

export default {
  name: "MyTimeline",
  data() {
    return {
      username:'',
      switchValue:'',
      timelineList:[],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value:''
    }
  },
  created() {
    let userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    this.username = userInfo.username;
    this.getUserTimeline()
  },
  methods: {
    getUserTimeline(){
      getBlogListByUid().then((res) => {
        this.timelineList = res.data.data
      })
    },
    goto(blogId) {
      let routeData = this.$router.resolve({
        path: "/showcase-the-article",
        query: {
          blogId
        }
      });
      window.open(routeData.href, '_blank');
    },
  }
}
</script>

<style scoped lang="css">

.timeline-title {
  display: inline-block;
  transition: all .4s;
}
.timeline-title:hover {
  cursor: pointer;
  color: #3b7bff;
}
.search-block {
  border: 2px solid #dcdcdc;
  padding: 25px;
  border-radius: 25px;
  margin-bottom: 20px;
}

/deep/ .el-range-separator{
  width: 20px !important;
}
</style>
